<template>
  <div class="discuss">
    <img :src="attrs.uAvatar" alt="" class="becomeHand discuss_avatar">
    <div>
      <!-- 昵称和发送时间 -->
      <div class="discuss_avatar_time">
        <span class="becomeHand">{{attrs.username}}</span>
        <span>{{attrs.rTime}}</span>
        <el-link>回复</el-link>
      </div>
      <!-- 父级评论 -->
      <div class="discuss_avatar_fu" v-if="discussParentMes!=null">
        <!-- <img :src="discussParentMes.uAvatar" alt="" class="becomeHand discuss_avatar_fuAvatar"> -->
        <div>
          <div class="discuss_avatar_time">
            <span class="becomeHand">{{discussParentMes.username}}</span>
            <span>{{discussParentMes.rTime}}</span>
          </div>
          <p class="discuss_avatar_content">{{discussParentMes.rContent}}</p>
        </div>

      </div>
      <div v-else></div>
      <!-- 评论内容 -->
      <p class="discuss_avatar_content">{{attrs.rContent}}</p>
    </div>
  </div>
</template>
<script>
export default {
  name:"discuss",
  props:{
    attrs:{
      type:Object,
      default(){
        return{}
      }
    }
  },
  data(){
    return {
      rTime:"",
      discussParentMes:{}
    }
  },
  created(){
    // this.rTime = this.common.changeTimeFormat(this.attrs.rTime)
    // this.discussParentMes.rTime = this.common.changeTimeFormat(discussParentMes.rTime)
    // console.log(this.attrs.rId)
    this.selectParentByrId(this.attrs.rId)
  },
  methods:{
      selectParentByrId(rId){
        let params = {}
        params.rId = rId
        // console.log(params)
        this.$axios.selectParentByrId(params).then(res => {
            this.discussParentMes = res.data
            // console.log(res)
            // if(res.data!=null){
            //   this.discussParentMes.rTime = this.common.changeTimeFormat(this.discussParentMes.rTime)
            // }
            // console.log(this.discussParentMes)
        })
      },
  }
}
</script>
<style scoped>
.discuss {
  margin: 20px;
  display: flex;
  border-bottom: 1px solid rgb(241, 241, 241);
}
.discuss_avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}
.discuss_avatar_fu {
  display: flex;
  width: 100%;
  padding: 10px;
  font-size: 12px;
  background-color: rgb(232 246 255 / 35%);
}
.discuss_avatar_fuAvatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.discuss_avatar_time {
  display: flex;
  align-items: center;
}
.discuss_avatar_time>span {
  margin-right: 20px;
  margin-bottom: 10px;
}
.discuss_avatar_time>.el-link {
  margin-top: -10px;
}
.discuss_avatar_content {
  margin: 10px 0;
}
</style>
